<template>
  <div class="home-container">
    <!-- 顶部搜索栏 -->
    <div class="header">
      <div class="location">
        <van-icon name="location-o" />
        <span>广州</span>
      </div>
      <div class="search-bar">
        <van-search
          v-model="searchValue"
          placeholder="搜索课程"
          shape="round"
          background="transparent"
          @search="onSearch"
        />
      </div>
      <div class="message">
        <van-icon name="chat-o" />
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="banner">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(banner, index) in banners" :key="index">
          <img :src="banner.image" :alt="banner.title">
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 课程分类 -->
    <div class="category-section">
      <div class="category-grid">
        <div v-for="category in categories" :key="category.id" class="category-item" @click="onCategoryClick(category)">
          <div class="category-icon" :style="{ backgroundColor: category.bgColor }">
            <van-icon :name="category.icon" :color="category.iconColor" size="24" />
          </div>
          <span>{{ category.name }}</span>
        </div>
      </div>
    </div>

    <!-- 推荐课程 -->
    <div class="recommended-section">
      <div class="section-header">
        <div class="title">
          <span class="main">推荐课程</span>
          <span class="sub">为你精选优质好课</span>
        </div>
        <van-button plain hairline type="primary" size="small" @click="onViewMore">查看更多</van-button>
      </div>
      <div class="course-grid">
        <div v-for="course in recommendedCourses" :key="course.id" class="course-card" @click="onCourseClick(course)">
          <div class="course-image">
            <img :src="course.image" :alt="course.title">
            <span class="course-tag">{{ course.tag }}</span>
          </div>
          <div class="course-info">
            <div class="course-title">{{ course.title }}</div>
            <div class="course-stats">
              <span class="students">{{ course.studentCount }}人已报名</span>
              <span class="price">¥{{ course.price }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 精选内容 -->
    <div class="featured-section">
      <div class="section-header" @click="onViewFeatured">
        <div class="title">
          <span class="main">精选内容</span>
          <span class="sub">好内容为你精选</span>
        </div>
        <van-button plain hairline type="primary" size="small">查看更多</van-button>
      </div>
      <div class="featured-list">
        <div v-for="item in featuredContent" :key="item.id" class="featured-item" @click="onFeaturedItemClick(item)">
          <img :src="item.image" :alt="item.title">
          <div class="featured-info">
            <div class="featured-title">{{ item.title }}</div>
            <div class="featured-desc">{{ item.description }}</div>
            <div class="featured-stats">
              <span>{{ item.views }}浏览</span>
              <span>{{ item.likes }}点赞</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const searchValue = ref('')

// 轮播图数据
const banners = ref([
  {
    image: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
    title: '精品课程1'
  },
  {
    image: 'https://img01.yzcdn.cn/vant/apple-2.jpg',
    title: '精品课程2'
  },
  {
    image: 'https://img01.yzcdn.cn/vant/apple-3.jpg',
    title: '精品课程3'
  }
])

// 课程分类
const categories = ref([
  { id: 1, name: '语文', icon: 'bookmark-o', bgColor: '#FFE8E8', iconColor: '#FF4B4B' },
  { id: 2, name: '数学', icon: 'calculator', bgColor: '#E8F5FF', iconColor: '#4B8BFF' },
  { id: 3, name: '英语', icon: 'chat-o', bgColor: '#FFF3E8', iconColor: '#FF9B4B' },
  { id: 4, name: '编程', icon: 'desktop-o', bgColor: '#E8FFF3', iconColor: '#4BFF9B' },
  { id: 5, name: '物理', icon: 'lightning', bgColor: '#F3E8FF', iconColor: '#9B4BFF' },
  { id: 6, name: '化学', icon: 'filter-o', bgColor: '#FFE8F5', iconColor: '#FF4B9B' },
  { id: 7, name: '生物', icon: 'flower-o', bgColor: '#E8FFF8', iconColor: '#4BFFB8' },
  { id: 8, name: '历史', icon: 'clock-o', bgColor: '#FFF8E8', iconColor: '#FFB84B' }
])

// 推荐课程
const recommendedCourses = ref([
  {
    id: 1,
    title: '高中数学提高班',
    image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    tag: '数学',
    studentCount: 128,
    price: '299.00'
  },
  {
    id: 2,
    title: '英语口语训练营',
    image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    tag: '英语',
    studentCount: 256,
    price: '399.00'
  },
  {
    id: 3,
    title: 'Python编程基础',
    image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    tag: '编程',
    studentCount: 64,
    price: '499.00'
  },
  {
    id: 4,
    title: '高考物理冲刺班',
    image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    tag: '物理',
    studentCount: 96,
    price: '599.00'
  }
])

// 精选内容
const featuredContent = ref([
  {
    id: 1,
    title: '如何提高学习效率？',
    description: '专家分享高效学习方法，让你事半功倍',
    image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    views: 1234,
    likes: 88,
    type: 'article'
  },
  {
    id: 2,
    title: '高考志愿填报指南',
    description: '志愿填报技巧，助你选择理想院校',
    image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    views: 2345,
    likes: 120,
    type: 'article'
  }
])

// 搜索处理
const onSearch = () => {
  router.push({
    path: '/courses',
    query: { keyword: searchValue.value }
  })
}

// 分类点击
const onCategoryClick = (category) => {
  router.push({
    path: '/courses',
    query: { category: category.id }
  })
}

// 查看更多
const onViewMore = () => {
  router.push('/courses')
}

// 课程点击
const onCourseClick = (course) => {
  router.push({
    path: `/course/${course.id}`
  })
}

// 查看更多精选内容
const onViewFeatured = () => {
  router.push('/featured')
}

// 精选内容项点击
const onFeaturedItemClick = (item) => {
  // 根据内容类型跳转到不同页面
  if (item.type === 'course') {
    router.push(`/course/${item.id}`)
  } else if (item.type === 'article') {
    router.push(`/article/${item.id}`)
  } else if (item.type === 'video') {
    router.push(`/video/${item.id}`)
  }
}
</script>

<style lang="scss" scoped>
// Mixins
@mixin text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin multi-ellipsis($lines) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  overflow: hidden;
}

.home-container {
  min-height: 100vh;
  background-color: #f7f8fa;

  .header {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: #fff;

    .location {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #323233;
      .van-icon {
        margin-right: 4px;
      }
    }

    .search-bar {
      flex: 1;
      margin: 0 12px;
      
      :deep(.van-search__content) {
        background-color: #f7f8fa;
      }
    }

    .message {
      font-size: 20px;
      color: #323233;
    }
  }

  .banner {
    margin: 12px;
    border-radius: 8px;
    overflow: hidden;

    .van-swipe {
      height: 160px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .category-section {
    background: #fff;
    padding: 16px 12px;
    margin-bottom: 8px;

    .category-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px 12px;

      .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .category-icon {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 8px;
        }

        span {
          font-size: 12px;
          color: #323233;
        }
      }
    }
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;

    .title {
      .main {
        font-size: 16px;
        font-weight: bold;
        color: #323233;
        margin-right: 8px;
      }

      .sub {
        font-size: 12px;
        color: #969799;
      }
    }
  }

  .recommended-section {
    background: #fff;
    margin-bottom: 8px;

    .course-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      padding: 0 12px 16px;

      .course-card {
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

        .course-image {
          position: relative;
          padding-top: 100%;

          img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .course-tag {
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(0, 0, 0, 0.4);
            color: #fff;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12px;
          }
        }

        .course-info {
          padding: 8px;

          .course-title {
            font-size: 14px;
            color: #323233;
            margin-bottom: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .course-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;

            .students {
              color: #969799;
            }

            .price {
              color: #ee0a24;
              font-weight: bold;
            }
          }
        }
      }
    }
  }

  .featured-section {
    padding: 16px;
    background: #fff;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      cursor: pointer;

      .title {
        .main {
          font-size: 18px;
          font-weight: 500;
          color: #323233;
          margin-right: 8px;
        }

        .sub {
          font-size: 12px;
          color: #969799;
        }
      }
    }

    .featured-list {
      .featured-item {
        display: flex;
        margin-bottom: 16px;
        padding: 12px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
        cursor: pointer;
        transition: all 0.3s ease;

        &:active {
          transform: scale(0.98);
          opacity: 0.8;
        }

        img {
          width: 120px;
          height: 80px;
          border-radius: 4px;
          object-fit: cover;
        }

        .featured-info {
          flex: 1;
          margin-left: 12px;
          overflow: hidden;

          .featured-title {
            font-size: 16px;
            font-weight: 500;
            color: #323233;
            margin-bottom: 8px;
            @include text-ellipsis;
          }

          .featured-desc {
            font-size: 14px;
            color: #969799;
            margin-bottom: 8px;
            line-height: 1.5;
            @include multi-ellipsis(2);
          }

          .featured-stats {
            font-size: 12px;
            color: #969799;

            span {
              margin-right: 12px;
            }
          }
        }
      }
    }
  }
}
</style>
